<template>
  <div>
    <Header />


    <div class="login-content">
      <div class="login-flex">
        <div class="login-left"></div>
        <!---->
        <div class="login-box">
          <h3 class="login-title">实名认证</h3>
          <form action="" id="renZ_Submit">
            <div class="alert-input">
              <input type="text" class="form-border user-name" v-model="name" name="username" placeholder="请输入您的真实姓名">
              <p class="prompt_name"></p>
              <input type="text" class="form-border user-sfz" v-model="idCard" name="sfz" placeholder="请输入15位或18位身份证号">
              <p class="prompt_sfz"></p>
            </div>
            <div class="alert-input-btn">
              <input type="button" @click="realName" class="login-submit" value="认证">
            </div>
          </form>
          <div class="login-skip">
            暂不认证？ <a href="javascript:;">跳过</a>
          </div>
        </div>

      </div>
    </div>

    <Footer />
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import reg from "@/utils/reg";
import Vue from "vue";
export default {
  name: "RealName",
  data() {
    return {
      name: '',
      idCard: ''
    }
  },
  methods: {
    realName() {
      if(!reg.name.test(this.name)) {
        alert("Are you chinese??")
        return ;
      }
      if(!reg.idCard.test(this.idCard)) {
        alert("身份证格式不正确！");
        return ;
      }

      let url = "/user/realName/"+this.name+"/"+this.idCard

      Vue.axios.get(url).then(({data}) => {
        if (data.success) {
          alert("认证成功！");
          this.$router.push("/index")
        }
        if(data.msg) {
          alert(data.msg);
        }
      })

    }
  },
  components: {Footer, Header}
}
</script>

<style scoped>

</style>